<template>
  <div class="list-table">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" style="height: 50px;margin-bottom: 20px;margin-top: -15px;" @select="handleSelect">
      <el-menu-item index="investor">{{ $t('基金投资人') }}</el-menu-item>
      <el-menu-item index="intention">{{ $t('意向投资人') }}</el-menu-item>
    </el-menu>
    <el-form ref="queryForm" :model="queryParams" :inline="true" @submit.native.prevent>
      <el-form-item :label="$t('出资人名称')" prop="fundName" style="margin-left: 21px;">
        <el-input
          v-model="queryParams.userName"
          :placeholder="$t('出资人名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="multipleTable" v-loading="loading" :data="lpList" border @select-all="multiOperationAll" @select="multiOperation">
      <el-table-column type="selection" width="50" />
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('出资人名称')" align="center" show-overflow-tooltip prop="userName" min-width="200" />
      <el-table-column :label="$t('认缴金额') + $t('金额单位')" align="center" show-overflow-tooltip prop="subscribedAmount" min-width="120">
        <template slot-scope="scope">
          {{ moneyFormat(scope.row.subscribedAmount, 'w') }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('出资人类型')" align="center" show-overflow-tooltip prop="type" min-width="120" :formatter="lpTypeFormat" />
      <!-- <el-table-column :label="$t('客户级别')" align="center" show-overflow-tooltip prop="level" min-width="120" /> -->
      <el-table-column :label="$t('基金名称')" align="center" show-overflow-tooltip prop="fundName" min-width="200" />
      <el-table-column :label="$t('基金类型')" align="center" show-overflow-tooltip prop="fundType" min-width="150" :formatter="fundTypeFormat" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div slot="footer" class="dialog-footer" style="text-align: right;margin-bottom: 20px;margin-right: 20px;">
      <el-button @click="clean">{{ $t("取消") }}</el-button>
      <el-button type="primary" @click="sendPage">{{ $t("确定") }}</el-button>
    </div>
  </div>
</template>

<script>
import { findLpBaseList } from '@/api/fund/lpBase/lpBase.js'
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 基金分配-分配详情表格数据
      lpList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      formOpen: false,
      activeIndex: 'investor',
      // 查询参数
      queryParams: {
        userName: '',
        period: undefined,
        pageNum: 1,
        pageSize: 10,
        investorType: ''
      },
      topPeriod: undefined,
      // 日期范围
      dateRange: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      fundId: '',
      typeOptions: [],
      fundTypeDict: [],
      // 多选
      multiSelectOperation: [],
      echoArray: []
    }
  },
  created() {
    this.getDicts('fund_investor_type').then(response => {
      this.typeOptions = response.data
    })
    this.getDicts('fund_type').then(response => {
      this.fundTypeDict = response.data
    })
  },
  methods: {
    /** 查询基金分配-分配详情列表 */
    getList() {
      this.loading = true
      // this.multiSelectOperation = []
      this.queryParams.fundId = this.fundId
      this.queryParams.period = this.topPeriod
      console.log(this.queryParams.investorType)
      findLpBaseList(this.queryParams).then(response => {
        this.lpList = []
        response.rows.forEach(item => {
          const row = {
            investorId: item.id,
            lpId: item.lpId,
            userName: item.userName,
            subscribedAmount: item.subscribedAmount,
            type: item.type,
            lpPhone: item.lpPhone,
            lpEmail: item.investEmail,
            lpEmailCc: item.investEmailCc,
            level: item.level,
            fundName: item.fundName,
            fundType: item.fundType,
            thisCallMoney: item.thisCallMoney,
            callDate: item.callDate,
            investorType: item.investorType,
            lpType: item.investorType
          }
          this.lpList.push(row)
        })
        this.total = response.total
        this.toggleSelection()
        this.loading = false
      })
    },
    // 类型字典回显
    lpTypeFormat(row) {
      return this.selectDictLabel(this.typeOptions, row.type)
    },
    // 类型字典回显
    fundTypeFormat(row) {
      return this.selectDictLabel(this.fundTypeDict, row.fundType)
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.queryParams.period = this.topPeriod
      this.queryParams.investorType = this.activeIndex
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.userName = ''
      this.resetForm('queryForm')
      this.queryHandle()
    },
    // 翻页选中的数据 自动打上对勾
    toggleSelection() {
      if (this.multiSelectOperation === null || this.multiSelectOperation === undefined) {
        this.multiSelectOperation = []
      }
      this.lpList.forEach((item2) => {
        this.multiSelectOperation.some((item) => {
          if (item.lpId === item2.lpId) {
            this.$nextTick(() => {
              this.$refs.multipleTable.toggleRowSelection(item2)
            })
            return false
          }
        })
      })
    },
    // 全选操作
    multiOperationAll(selection) {
      if (selection.length > 0) {
        // 全选
        this.multiSelectOperation = []
        var rows = []
        selection.forEach(row => {
          rows.push(row)
          this.multiOperation(rows, row)
        })
      } else {
        // 取消全选
        this.multiSelectOperation = []
      }
      console.log('当前全选', this.multiSelectOperation)
    },
    // 单选操作
    multiOperation(selection, row) {
      if (selection.length && selection.indexOf(row) !== -1) {
        // 选中
        this.multiSelectOperation.push(row)
      } else {
        // 取消选中
        this.multiSelectOperation.forEach((item, i) => {
          if (item.lpId === row.lpId) {
            this.multiSelectOperation.splice(i, 1)
          }
        })
      }
      console.log('当前单选', this.multiSelectOperation)
    },
    // 确定操作
    sendPage() {
      this.$emit('choiceBaseList', this.multiSelectOperation)
    },
    // 关闭页面
    clean() {
      this.$emit('lpBaseClean', undefined)
    },
    // 切换页签
    handleSelect(key) {
      this.activeIndex = key
      this.resetQuery()
    }
  }
}
</script>
